<template>
	<el-card class="box-card">
		<template #header>
			<span class="title">挂号订单</span>
		</template>
		<!-- 选择筛选条件 -->
		<el-form inline class="form-inline">
			<el-form-item label="就诊人">
				<el-select placeholder="请选择就诊人" v-model="patientIdActive" @change="changeFn">
					<el-option label="全部就诊人" value="" />
					<el-option :label="item.contactsName" :value="item.id" v-for="item in patientInfo" :key="item.id" />
				</el-select>
			</el-form-item>
			<el-form-item label="订单状态">
				<el-select placeholder="请选择订单状态" v-model="orderStateActive" @change="changeFn">
					<el-option label="全部订单" value="" />
					<el-option
						:label="item.comment"
						:value="item.status"
						v-for="(item, index) in orderState"
						:key="index" />
				</el-select>
			</el-form-item>
		</el-form>
		<!-- 表格 -->
		<el-table :data="tableData" v-loading="loading">
			<el-table-column prop="reserveDate" label="就诊时间" :formatter="formatterReserveDate" width="130" />
			<el-table-column prop="hosname" label="医院" width="" />
			<el-table-column prop="depname" label="科室" />
			<el-table-column prop="title" label="医生" />
			<el-table-column prop="amount" label="服务费" width="80" />
			<el-table-column prop="patientName" label="就诊人" width="100" />
			<el-table-column prop="param.orderStatusString" label="订单状态" />
			<el-table-column prop="name" label="操作" width="80">
				<template #="{ row }">
					<el-link type="primary" @click="goDetail(row)">详情</el-link>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页器 -->
		<el-pagination
			class="pagination"
			background
			v-model:current-page="page"
			v-model:page-size="limit"
			:page-sizes="[10, 20, 30, 40]"
			layout="prev, pager, next, jumper, ->, sizes, total"
			:total="total"
			@current-change="changeFn"
			@size-change="changeFn" />
	</el-card>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { getUserOrderInfo, getOrderState } from '@/api/user';
import { OrderInfo, OrderState } from '@/api/user/type';
import { useRouter } from 'vue-router';
import { getPatientInfo } from '@/api/hospital';
import { Patient } from '@/api/hospital/type';

const router = useRouter();

let tableData = ref<OrderInfo[]>([]);
let page = ref(1);
let limit = ref(10);
let total = ref(400);

let orderState = ref<OrderState[]>([]);
let patientInfo = ref<Patient[]>([]);
let orderStateActive = ref<string | undefined>();
let patientIdActive = ref<number | undefined>();

let loading = ref(true);

// 获取表格数据
function getTableData() {
	loading.value = true;
	getUserOrderInfo(page.value, limit.value, patientIdActive.value, orderStateActive.value)
		.then((res) => {
			if (res.ok) {
				tableData.value = res.data.records;

				total.value = res.data.total;
			}
		})
		.finally(() => {
			loading.value = false;
		});
}

function changeFn() {
	getTableData();
}

function goDetail(obj: OrderInfo) {
	router.push({
		path: '/user/order',
		query: {
			orderId: obj.id,
		},
	});
}

function formatterReserveDate(row: OrderInfo) {
	return row.reserveDate + (row.reserveTime === 0 ? ' 上午' : ' 下午');
}

function getOrderStateFn() {
	getOrderState().then((res) => {
		if (res.ok) {
			orderState.value = res.data;
		}
	});
}

function getPatientInfoFn() {
	getPatientInfo().then((res) => {
		if (res.ok) {
			patientInfo.value = res.data;
		}
	});
}

getTableData();
getOrderStateFn();
getPatientInfoFn();
</script>

<style scoped lang="scss">
.box-card {
	max-width: 100%;
	.title {
		font-size: 18px;
	}
	.form-inline {
		padding-left: 10px;
	}
	.pagination {
		margin-top: 20px;
		padding-left: 10px;
	}
}
</style>
